import * as echarts from 'echarts';

export function echarts1() {
  var img = require('@/assets/images/yuan.svg');

  var trafficWay = [{
    name: '玉米',
    value: 2000
  }, {
    name: '小麦',
    value: 1224
  }, {
    name: '土豆',
    value: 234
  }, {
    name: '其他',
    value: 221
  }];

  var data = [];
  var color = ['#38CF9A', '#D8C648', '#6FB1F7', '#576a77']
  for (var i = 0; i < trafficWay.length; i++) {
    data.push({
      value: trafficWay[i].value,
      name: trafficWay[i].name,
      itemStyle: {
        normal: {
          borderWidth: 0,
          shadowBlur: 20,
          borderColor: color[i],
          // shadowColor: color[i]
        }
      }
    }, {
      value: 2,
      itemStyle: {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          color: 'rgba(0, 0, 0, 0)',
          borderColor: 'rgba(0, 0, 0, 0)',
          borderWidth: 0
        }
      }
    });
  }
  var seriesOption = [{
    type: 'pie',
    clockWise: true,
    radius: ['50%', '60%'],
    center: [90,'49%'],
    hoverAnimation: false,
    label: {
      show: false,
      position: 'outside',
      color: '#fff',
      formatter: function (params) {
        var percent = 0;
        var total = 0;
        for (var i = 0; i < trafficWay.length; i++) {
          total += trafficWay[i].value;
        }
        percent = ((params.value / total) * 100).toFixed(0);
        if (params.name !== '') {
          return params.name  + params.value + '亩' + ' ' + '占比：' + percent + '%';
        } else {
          return '';
        }
      },
    },
    labelLine: {
      length: 0,
      length2: 0,
      show: false,
      color: '#00ffff'
    },
    labelLayout(params) {
      return {
        x: 200,
        y: 20 + (20 * (params.dataIndex)),
        text:'123',
        verticalAlign: 'top',
        align: 'left'
      }
    },
    data: data
  }];
  return {
    color: color,
    title: {
      text: '种类\n占比',
      top: '38%',
      textAlign: "center",
      left: 85,
      textStyle: {
        color: '#fff',
        fontSize: 22,
        fontWeight: '400',
        fontFamily: 'ysbt'
      }
    },
    graphic: {
      elements: [{
        type: "image",
        z: 0,
        style: {
          image: img,
          width: 160,
          height: 160
        },
        left: 10,
        top: 'center',
      }]
    },
    tooltip: {
      trigger: 'item',
      show: true,
      formatter: "{b} : <br/>{c}公顷",
      padding: [8, 10], //内边距
    },
    legend: {
      orient: 'vertical',
      data: ['玉米', '小麦', '土豆', '其他'],
      right: '20%',
      top: 'center',
      textStyle: {
        color: "#ddd"
      },
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 30,
      formatter: function (params) {
        let total = 0;
        for (var i = 0; i < trafficWay.length; i++) {
          total += trafficWay[i].value;
        }
        for (var i = 0; i < trafficWay.length; i++) {
          if (trafficWay[i].name == params) {
            return trafficWay[i].name  + trafficWay[i].value + '亩' + ' ' + '占比：' + ((trafficWay[i].value / total) * 100).toFixed(0) + '%';
          }
        }
      },
    },
    toolbox: {
      show: false
    },
    series: seriesOption
  }

}
export function echarts2() {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 10,
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      top: 30,
      left: 15,
      right: 20,
      bottom: 10,
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: [2019,2020,2021,2022],
        axisLabel: {
          interval: 0,
          textStyle: {
            color: '#D0DEEE'
          },
          // 默认x轴字体大小
          fontSize: 12,
          // margin:文字到x轴的距离
          margin: 15
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#6C8097'
          }
        },
      }
    ],
    yAxis: [
      {
        name: '面积',
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#DCE2E8'
          }
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            color: '#D0DEEE'
          },
          // 默认x轴字体大小
          fontSize: 12,
          // margin:文字到x轴的距离
          margin: 15
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: 'rgba(108, 128, 151, 1)'
          }
        },
      }
    ],
    series: [
      {
        name: '小麦',
        showBackground: true,
        type: 'bar',
        emphasis: {
          focus: 'series'
        },
        data: [320, 332, 301, 334, 390, 330, 320],
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#E0CE65' },
          { offset: 1, color: 'rgba(0, 89, 84, 0)' }
        ])
      },
      {
        name: '玉米',
        showBackground: true,
        type: 'bar',
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 101, 134, 90, 230, 210],
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#17AD8A' },
          { offset: 1, color: 'rgba(0, 89, 84, 0)' }
        ])
      },
      {
        name: '土豆',
        showBackground: true,
        type: 'bar',
        emphasis: {
          focus: 'series'
        },
        data: [220, 182, 191, 234, 290, 330, 310],
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#B4B8C2' },
          { offset: 1, color: 'rgba(0, 89, 84, 0)' }
        ])
      },
      {
        name: '其他',
        showBackground: true,
        type: 'bar',
        emphasis: {
          focus: 'series'
        },
        data: [150, 232, 201, 154, 190, 330, 410],
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#1A7EED' },
          { offset: 1, color: 'rgba(0, 89, 84, 0)' }
        ])
      }
    ]
  };
}
export function echarts3() {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 10,
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      top: 30,
      left: 15,
      right: 20,
      bottom: 10,
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: [2019,2020,2021,2022],
        axisLabel: {
          interval: 0,
          textStyle: {
            color: '#D0DEEE'
          },
          // 默认x轴字体大小
          fontSize: 12,
          // margin:文字到x轴的距离
          margin: 15
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#6C8097'
          }
        },
      }
    ],
    yAxis: [
      {
        name: '面积',
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#DCE2E8'
          }
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            color: '#D0DEEE'
          },
          // 默认x轴字体大小
          fontSize: 12,
          // margin:文字到x轴的距离
          margin: 15
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: 'rgba(108, 128, 151, 1)'
          }
        },
      }
    ],
    series: [
      {
        name: '小麦',
        showBackground: true,
        type: 'bar',
        emphasis: {
          focus: 'series'
        },
        data: [320, 332, 301, 334, 390, 330, 320],
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#E0CE65' },
          { offset: 1, color: 'rgba(0, 89, 84, 0)' }
        ])
      },
      {
        name: '玉米',
        showBackground: true,
        type: 'bar',
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 101, 134, 90, 230, 210],
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#17AD8A' },
          { offset: 1, color: 'rgba(0, 89, 84, 0)' }
        ])
      },
      {
        name: '土豆',
        showBackground: true,
        type: 'bar',
        emphasis: {
          focus: 'series'
        },
        data: [220, 182, 191, 234, 290, 330, 310],
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#B4B8C2' },
          { offset: 1, color: 'rgba(0, 89, 84, 0)' }
        ])
      },
      {
        name: '其他',
        showBackground: true,
        type: 'bar',
        emphasis: {
          focus: 'series'
        },
        data: [150, 232, 201, 154, 190, 330, 410],
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#1A7EED' },
          { offset: 1, color: 'rgba(0, 89, 84, 0)' }
        ])
      }
    ]
  }
}
export function echarts4() {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    grid: {
      left: 20,
      right: 20,
      bottom: 10,
      top: 30,
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['2019', '2020', '2021', '2022'],
        axisLabel: {
          interval: 0,
          textStyle: {
            color: '#D0DEEE'
          },
          // 默认x轴字体大小
          fontSize: 12,
          // margin:文字到x轴的距离
          margin: 15
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#6C8097'
          }
        },
      }
    ],
    yAxis: [
      {
        name: '有效预警次数',
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#DCE2E8'
          }
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            color: '#D0DEEE'
          },
          // 默认x轴字体大小
          fontSize: 12,
          // margin:文字到x轴的距离
          margin: 15
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: 'rgba(108, 128, 151, 1)'
          }
        },
      }
    ],
    series: [
      {
        name: 'Email',
        type: 'line',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 101, 134, 90, 230, 210],
        lineStyle:{
          color: '#F0485C'
        },
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#F0485C' },
          { offset: 1, color: 'rgba(0, 89, 84, 0)' }
        ])
      }
    ]
  }
}
export function echarts5() {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    grid: {
      left: 20,
      right: 20,
      bottom: 10,
      top: 30,
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['2019', '2020', '2021', '2022'],
        axisLabel: {
          interval: 0,
          textStyle: {
            color: '#D0DEEE'
          },
          // 默认x轴字体大小
          fontSize: 12,
          // margin:文字到x轴的距离
          margin: 15
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#6C8097'
          }
        },
      }
    ],
    yAxis: [
      {
        name: '节水量（吨）',
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#DCE2E8'
          }
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            color: '#D0DEEE'
          },
          // 默认x轴字体大小
          fontSize: 12,
          // margin:文字到x轴的距离
          margin: 15
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: 'rgba(108, 128, 151, 1)'
          }
        },
      }
    ],
    series: [
      {
        name: 'Email',
        type: 'line',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 101, 134, 90, 230, 210],
        lineStyle:{
          color: '#1A8CED'
        },
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#1A8CED' },
          { offset: 1, color: 'rgba(0, 89, 84, 0)' }
        ])
      }
    ]
  };
}

export function echarts6() {
   return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      icon: 'circle',
      top: '0',
      left: 20,
      itemWidth: 10,
      itemGap: 20,
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      left: '5%',
      right: '15%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      name: '(千吨)',
      type: 'value',
      boundaryGap: [0, 0.01],
      axisLine: {
        lineStyle: {
          color: '#DCE2E8'
        }
      },
      axisLabel: {
        interval: 0,
        textStyle: {
          color: '#D0DEEE'
        },
        // 默认x轴字体大小
        fontSize: 12,
        // margin:文字到x轴的距离
        margin: 15
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(108, 128, 151, 1)'
        }
      },
    },
    yAxis: {
      type: 'category',
      data: ['2019', '2020', '2021', '2022'],
      axisLabel: {
        interval: 0,
        textStyle: {
          color: '#D0DEEE'
        },
        // 默认x轴字体大小
        fontSize: 12,
        // margin:文字到x轴的距离
        margin: 15
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#6C8097'
        }
      },
    },
    series: [
      {
        name: '化肥',
        type: 'bar',
        showBackground: true,
        data: [5, 6, 7, 10],
        color: new echarts.graphic.LinearGradient(1, 1, 0, 1, [
          { offset: 0, color: 'rgba(224, 206, 101, 1)' },
          { offset: 1, color: 'rgba(0, 89, 84, 0)' }
        ])
      },
      {
        name: '农药',
        type: 'bar',
        showBackground: true,
        data: [6, 8, 1, 5],
        color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
          { offset: 0, color: 'rgba(26, 126, 237, 1)' },
          { offset: 1, color: 'rgba(0, 89, 84, 0)' }
        ])
      }
    ]
  };
}

